<template>

	<view class="history-data">
	<smh-time-range v-if='showStart' :time='time' @confrim='confirms' @cancel='cancel'
		style='position: fixed;bottom:50rpx'></smh-time-range>

		<!-- 标题 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#333" size="50"></u-icon>
			<text>填写症状</text>
	
		</view>

		<!-- 时间选择 -->
		<view class="calendar" @click="calendarOptions.show= true" style="margin-top:18px;">
			<u-icon name="arrow-left" style="float: left;padding-top: 25rpx;"></u-icon>
			<image style="width: 40rpx;height: 40rpx;position: absolute;top: 23%;left: 34%;"
				src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/calendar.png" mode=""></image>
			<text style="position: absolute;top: 2%;padding-left: 10rpx;left: 40%;">{{pageOptions.time}}</text>
			<u-icon name="arrow-right" style="float: right;padding-top: 25rpx;"></u-icon>
		</view>

		<view class="main-content">
			<view class="start-end-timer">
				<view class="start-timer">
					<view class="title" style="color:#333;font-size:15px;"  @click="openTimer" >
						选择时间段
					</view>
					<view class="timer"  @click="openTimer" style="background-color: #F1F1F1;height:30px;margin-left:16px;width:222px;border-radius: 4px;text-align: center;line-height: 30px;">
						{{startTimer}}
					</view>
				
				</view>
				<view class="start-timer" style="margin-top:15px">
					<view class="title" style="color:#333;font-size:15px;">
					  时间段
					</view>
					<view class="timer" style="height:30px;margin-left:45px;width: 200px;border-radius: 4px;display: flex;
					align-items: center;justify-content: space-between;">
						<view class="" @click="hours(0)">
							半小时
						</view>
						<view class="" @click="hours(1)">
							一小时
						</view>
						<view class="" @click="hours(2)">
							两小时
						</view>
					</view>
				</view>
			</view>
			<view class="symptom-content">
				<view class="title">
				症状选择
				</view>
				<view class="list-content">
					<view class="list" style="margin-top:2px">
						<view class="list-title" >
							状态不佳
						</view>
						<view class="" style='margin-top:12rpx;width:100%;display:flex;flex-wrap:wrap'>
						
							<view :class="choosedSym.includes(item.name)?'active-sym':'' " @click='chooseSym(item)'
								v-for="(item, index) in list" style='margin:12rpx 0 0 38rpx;width: 180rpx;height: 60rpx;padding: 8rpx 16rpx;text-align: center;line-height: 50rpx;border-radius: 4rpx;background: #eaf2ff;color:#999;font-size:34rpx' :key="index" :name="item.name">
								{{item.name}}
							</view>
							
						</view>
					</view>
					<view class="list" style="margin-top:12px">
						<view class="list-title" >
							呼吸道症状
						</view>
						<view class="" style='margin-top:12rpx;width:100%;display:flex;flex-wrap:wrap'>
						
							<view :class="choosedSym.includes(item.name)?'active-sym':'' " @click='chooseSym(item)'
								v-for="(item, index) in list2" style='margin:12rpx 0 0 38rpx;width: 180rpx;height: 60rpx;padding: 8rpx 16rpx;text-align: center;line-height: 50rpx;border-radius: 4rpx;background: #eaf2ff;color:#999;font-size:34rpx' :key="index" :name="item.name">
								{{item.name}}
							</view>
							
						</view>
					</view>
					<view class="list" style="margin-top:12px">
						<view class="list-title" >
							发烧
						</view>
						<view class="" style='margin-top:12rpx;width:100%;display:flex;flex-wrap:wrap'>
						
							<view :class="choosedSym.includes(item.name)?'active-sym':'' " @click='chooseSym(item)'
								v-for="(item, index) in list3" style='margin:12rpx 0 0 38rpx;width: 180rpx;height: 60rpx;padding: 8rpx 16rpx;text-align: center;line-height: 50rpx;border-radius: 4rpx;background: #eaf2ff;color:#999;font-size:34rpx' :key="index" :name="item.name">
								{{item.name}}
							</view>
							
						</view>
					</view>
					<view class="" style='margin-top:12rpx;width:100%;display:flex;flex-wrap:wrap;margin-top:10rpx'>
						<view class="" v-for="(item, index) in choosedSym" :key='index' style='margin:12rpx 0 0 38rpx;font-size:34rpx;min-width: 100rpx;height: 60rpx;padding: 8rpx 16rpx;text-align: center;line-height: 50rpx;border-radius: 4rpx;background: #007AFF;#;color:#fff'>
							{{item}}
						</view>
					</view>
				</view>
				
			</view>
		</view>



		<view class="btn-container" style="font-size: 38rpx;">
			<view class="cancel-btn" @click='cancelBack'>
				清空
			</view>
			<view class="confirm-btn" @click="confirmBack">
				提交
			</view>
		</view>

		<u-calendar v-model="calendarOptions.show" mode="date" @change="handleCalendarChange"></u-calendar>
	</view>
</template>

<script>
	export default {
		components: {



		},
		data() {
			return {
				time: ['12', '30', '0', '17', '30'],
				showStart:false,
				startTimer:'',
				list: [{
						name: '四肢无力',
						checked: false,
						disabled: false
					},
					{
						name: '异常哭闹',
						checked: false,
						disabled: false
					},
					{
						name: '食欲不振',
						checked: false,
						disabled: false
					},
					{
						name: '睡不踏实',
						checked: false,
						disabled: false
					},
					
				],
				list2: [{
						name: '流鼻涕',
						checked: false,
						disabled: false
					},
					{
						name: '打喷嚏',
						checked: false,
						disabled: false
					},
					{
						name: '咳嗽',
						checked: false,
						disabled: false
					},
					
				],
				list3: [{
						name: '低烧',
						checked: false,
						disabled: false
					},
					{
						name: '高烧',
						checked: false,
						disabled: false
					},
				
					
				],
				choosedSym: [],
				calendarOptions: {
					show: false
				},
				pageOptions: {
					time: this.today()
				},


			}

		},
		onShow() {



		},

		mounted() {

			


		},
		onLoad() {

		},

		methods: {
			hours(e){
				const now = this.getNow()
				let nowH = this.getNow().substring(0, 2)
				let nowM = this.getNow().substring(3, 5)
				let thenH
				let thenM 
				if(e==1){
					thenH = nowH-1
					thenM = nowM
				}else if(e==2){
					thenH = nowH-2
					thenM = nowM
				}else {
					if(parseInt(nowM)>=30){
						thenM = nowM - 30
						thenH = nowH
					}else{
						thenM = 60 - nowM
						thenH = nowH -1
					}
				}
				if (String(thenH).length < 2) {
					thenH = '0' + thenH
				}
				if(String(thenM).length<2){
					thenM = '0'+thenM
				}
				this.startTimer =`${thenH}:${thenM}-${now}`
			},
			openTimer(){
				let nowH = this.getNow().substring(0, 2)
				let nowM = this.getNow().substring(3, 5)
				let thenH
				
				if (Number(nowH) >= 10) {
					thenH = Number(nowH) - 2
					console.log(thenH, 11)
				} else {
					let h = nowH.substring(1, 2)
					if (Number(h) >= 2) {
						thenH = Number(h) - 2
					} else {
						thenH = 0
					}
				}
				if (thenH < 10) {
					thenH = '0' + thenH
				}
			this.time = [`${thenH}`, `${nowM}`, '0', `${nowH}`, `${nowM}`]
			this.showStart = true	
			},
		 chooseSym(item) {
		 	if (this.choosedSym.length) {
		 		if (this.choosedSym.includes(item.name)) {
		 			this.choosedSym.forEach((ele, i) => {
		 				if (ele === item.name) {
		 					this.choosedSym.splice(i, 1)
		 				}
		 			})
		 		} else {
		 			this.choosedSym.push(item.name)
		 		}
		 	} else {
		 		this.choosedSym.push(item.name)
		 	}
		 },
			
			now() {
				var myDate = new Date();
				var year = myDate.getFullYear(); //获取当前年
				var mon = myDate.getMonth() + 1; //获取当前月
				if (mon < 10) {
					mon = "0" + mon;
				}
				var date = myDate.getDate(); //获取当前日
				if (date < 10) {
					date = "0" + date;
				}
				var hours = myDate.getHours(); //获取当前小时
				if (hours < 10) {
					hours = "0" + hours;
				}
				var minutes = myDate.getMinutes(); //获取当前分钟
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				var seconds = myDate.getSeconds(); //获取当前秒
				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				let dates = `${year}-${mon}-${date} ${hours}:${minutes}:${seconds}`
				return dates
			
			},
	
			today() {
				var myDate = new Date();
				var year = myDate.getFullYear(); //获取当前年
				var mon = myDate.getMonth() + 1; //获取当前月
				if (mon < 10) {
					mon = "0" + mon;
				}
				var date = myDate.getDate(); //获取当前日
				if (date < 10) {
					date = "0" + date;
				}
				var hours = myDate.getHours(); //获取当前小时
				if (hours < 10) {
					hours = "0" + hours;
				}
				var minutes = myDate.getMinutes(); //获取当前分钟
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				var seconds = myDate.getSeconds(); //获取当前秒
				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				let dates = `${year}-${mon}-${date}`
				return dates

			},
			yesterday() {
				var myDate = new Date();
				myDate.setTime(myDate.getTime()-24*60*60*1000)
				var year = myDate.getFullYear(); //获取当前年
				var mon = myDate.getMonth() + 1; //获取当前月
				if (mon < 10) {
					mon = "0" + mon;
				}
				var date = myDate.getDate(); //获取当前日
				if (date < 10) {
					date = "0" + date;
				}
				var hours = myDate.getHours(); //获取当前小时
				if (hours < 10) {
					hours = "0" + hours;
				}
				var minutes = myDate.getMinutes(); //获取当前分钟
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				var seconds = myDate.getSeconds(); //获取当前秒
				if (seconds < 10) {
					seconds = "0" + seconds;
				}
				let dates = `${year}-${mon}-${date}`
				return dates
			
			},

	getNow() {
				var myDate = new Date();
				var hours = myDate.getHours(); //获取当前小时
				if (hours < 10) {
					hours = "0" + hours;
				}
				var minutes = myDate.getMinutes(); //获取当前分钟
				if (minutes < 10) {
					minutes = "0" + minutes;
				}
				let now = hours + ':' + minutes
				return now
			},
		confirms(e) {
			console.log(e, 151)
		
			let timerS = this.today() +' ' +e.time.substring(0,5) +':00'
			let timerE = this.today() +' '+ e.time.substring(6) +':00'
			console.log(timerS,22,timerE)
			var date = new Date()
			const now = Date.parse(date)
			const timeStampS = Date.parse(timerS)
			const timeStampE = Date.parse(timerE)
			if(timeStampE<=timeStampS){
				uni.showToast({
					title:'开始时间不能大于结束时间'
				})
				return
			}
			if(now<timeStampE){
				uni.showToast({
					title:'不能选择未来时间喔'
				})
				return
			}
			
			this.startTimer = e.time
			this.showStart = false
		},
		cancel(e) {
			console.log(e, 11)
			this.showStart = false
		},
			navigateBack() {
			uni.navigateTo({
				url:'../symptom'
			})
			},
			confirmBack() {
				if (!this.startTimer) {
					uni.showToast({
						title: '请选择时间'
					})
					return
				}
				// if (!this.endTimer) {
				// 	uni.showToast({
				// 		title: '请选择结束时间'
				// 	})
				// 	return
				// }
				if (!this.choosedSym.length) {
					uni.showToast({
						title: '请选择症状！'
					})
					return
				}
				this.addSymptom()
				// uni.navigateTo({
				// 	url: '/pages/index/histroy/HistroyData'
				// });
			},
			async addSymptom() {
				let symptom = this.choosedSym
			
				let tpl_param = {
					// date: '2022-04-07',
					start: this.pageOptions.time+ ' ' + this.startTimer.substring(0, 5),
					end: this.pageOptions.time + ' ' + this.startTimer.substring(6),
					symptom: symptom.join()
				};
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let res = await this.$api.symptomSave(tpl_param);
			
				if (res.code == 200) {
					uni.navigateTo({
						url:'../symptom'
					})
					uni.showToast({
						title: res.message || '添加失败'
					});
				} else {
					uni.showToast({
						title: res.message || '添加失败'
					});
				}
				uni.hideLgoading();
			},
			cancelBack(){
					this.choosedSym = []
			},
			handleCalendarChange(e) { // 选择日期
				console.log(e)
				console.log(this.yesterday(),555,this.today())
				if(e.result!=this.yesterday()&&e.result!=this.today()){
					uni.showToast({
						title: '超过可选择时间范围！'
					})
					return
				}
				this.pageOptions.time = e.result
				

			}
		}
	}
</script>
<style scoped lang="scss">
	.view-sym {
		width: 100rpx;
		height: 60rpx;
		padding: 8rpx 16rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 4rpx;
		background: #eaf2ff;
		color: #999;
		margin-left:25px;
	}


	.active-sym {
		background: #007AFF !important;
		color: #fff !important;
	}
.symptom-content{
	widgth:100%;
	margin-top:26px;
	.title{
		font-size:18px;
		color:#333;
		margin-left:21px;
	}
	.list-content{
		width:100%;
		.list-title{
			color:#fac209;
			font-size:18px;
			text-align: left;
			margin-top:15px;
			margin-left:21px;
		}
	
	}
}
.start-end-timer{
	width:100%;
	padding-left:21px;
	box-sizing: border-box;
	.start-timer{
		width:100%;
		display: flex;
		align-items: center;
	}
	.end-timer{
		width:100%;
		display: flex;
		align-items: center;
	}
}
	.main-content {
		width: 100%;
		padding: 15px 12px;
		box-sizing: border-box;

		.content {
			width: 100%;
			margin-top:15px;
			background-color: #F1F1F1;
			border-radius: 6px;
			height: 200px;
			padding: 16px;
			box-sizing: border-box;

			.timer {
				font-size: 16px;
				color: #3d3d3d;
			}

			.symptom-list {
				width: 100%;
				display: flex;
				justify-content: left;
				margin-top: 15px;

				.item {
					width: 80px;
					background-color: #e0e0ff;
					text-align: center;
					line-height: 30px;
					height: 30px;
					color: #3d3d3d;
					border-radius: 5px;
				}

			}

			.tip {
				margin-top: 15px;
				color: #767676;
				font-size: 18px;
			}
		}
	}

	.Tips {
		display: flex;
		margin: 20rpx;
		margin-top: 50rpx;
	}

	.Tips>view {
		height: 250rpx;
		background-color: #F6F7FB;
		border-radius: 30rpx;

		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
	}

	// 温馨提示
	.tips_join {
		flex: 1;
		padding: 20rpx;
	}

	.tips_join>image {
		width: 40rpx;
		height: 40rpx;
	}
	.active-item{
		margin-left:20px !important;	}
	.tips_join>view {
		// margin-top: 10rpx;
		text-align: center;
		font-size: 16px;
		color: #253DC2;
	}

	.tips_join>text {
		font-size: 16px;
		font-weight: bold;
		margin-left: 10rpx;
		color: #FF5310;
	}

	.uni-ec-canvas {
		width: 100%;
		height: 100%;
		display: block;
	}

	.history-data {
		overflow: hidden;
	}



	.navbar {
		margin-top: 90rpx;
		margin-bottom: 20rpx;
		width: 750rpx;
	}

	.navbar>text {
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 220rpx;
	}

	.icon-left {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	// 日历
	.calendar {
		background-color: rgb(241, 241, 241);
		position: relative;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		border-radius: 50rpx;
	}



	.uni-ec-canvas {
		margin-top: 22rpx;
		width: 100%;
		height: 640rpx;
		display: block;
	}
	.btn-container {
		width: 100%;
		padding: 60rpx 20%;
		box-sizing: border-box;
	
		.cancel-btn {
			width: 100%;
			text-align: center;
			line-height: 58rpx;
			height: 58rpx;
			border: 1rpx solid #999;
			border-radius: 8rpx;
		}
	
		.confirm-btn {
			margin-top: 30rpx;
			width: 100%;
			text-align: center;
			line-height: 58rpx;
			height: 58rpx;
			color: #fff;
			background: #3370ff;
			border-radius: 8rpx;
		}
	}
</style>
